<template>
  <div class="grid-setting">
    <el-radio-group v-model="activeSetting" size="mini" >
      <el-radio-button label="gridSetting" >{{$t('custom.component.gadget.gridOption')}}</el-radio-button>
      <el-radio-button label="columnsSetting"  >{{$t('custom.component.gadget.columnsSetting')}}</el-radio-button>
      <!--<el-radio-button label="event">Event</el-radio-button>-->
    </el-radio-group>
    <el-form ref="gridSetting" :model="setting" label-position="top" v-show="activeSetting==='gridSetting'" style="height:auto;">
      <el-form-item :label="$t('custom.component.gadget.gridLines')">
        <el-select v-model="setting.report.gridLines" placeholder="Please select">
          <el-option v-for="(item,index) in gridLinesOptions" :key="index"  :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.toolbar')">
        <el-checkbox-group v-model="setting.report.toolbar">
          <el-checkbox label="PdfExport"></el-checkbox>
          <!-- <el-checkbox label="ExcelExport"></el-checkbox> -->
          <el-checkbox label="CsvExport"></el-checkbox>
          <el-checkbox label="ColumnChooser"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <!--<el-form-item label="showColumnChooser">
        <el-switch v-model="setting.report.showColumnChooser"></el-switch>
      </el-form-item>-->
      <el-form-item :label="$t('custom.component.gadget.showPaging')">
        <el-switch v-model="setting.report.allowPaging"></el-switch>
      </el-form-item>
      <!-- <el-form-item label="Show Export Option">
        <el-switch v-model="setting.report.showExportOption"></el-switch>
      </el-form-item> -->
    </el-form>
    <div v-show="activeSetting==='columnsSetting'">
      <el-switch v-model="expandAllColumn" active-text="Expand All" inactive-text="" @change="expandAll"></el-switch>
      <el-card class="column-card" v-for="(item,index) in setting.report.columns" :key="index"  >
        <el-row type="flex" class="row-bg">
          <el-col :span="16">
            <div>
              <span class="column-field">{{item.field}} </span><i class="column-type">: {{item.type}}</i>
            </div>
            </el-col>
          <el-col :span="8">
            <div>
              <el-tooltip :open-delay="1000" class="item" effect="dark" :content="item.visible ? 'Display Column ' : 'Hide Column'" placement="bottom-end">
                  <el-link style="float: left; border: none;" :underline="false" @click.native="toggleVisible(index, item.visible)"><i v-bind:class="[item.visible ? 'cuifont icon_eye_show': 'cuifont icon_eye_hide']" style="margin-left: 5px;"></i></el-link>
                </el-tooltip>
                <el-link class="column-link" :underline="false" @click.native="showSettingClick(index, item.showSetting)"><i v-bind:class="[item.showSetting ? 'el-icon-arrow-up': 'el-icon-arrow-down']" style="margin-left: 5px;"></i></el-link>
                <el-link class="column-link" :underline="false" @click.native="upSortClick(index)" v-show="index != 0"><i class="el-icon-top"></i></el-link>
                <el-link class="column-link" :underline="false" @click.native="downSortClick(index)" v-show="index != setting.report.columns.length-1"><i class="el-icon-bottom"></i></el-link>
            </div>
          </el-col>
        </el-row>
            <el-form label-position="left" v-show="item.showSetting" label-width="120px" style="border-top: 1px solid #EBEEF5;padding-top: 10px;">
              <input hidden name="field" v-model="item.field" />
              <el-form-item :label="$t('custom.component.gadget.headerText')">
                <el-input v-model="item.headerText"></el-input>
              </el-form-item>
              <el-form-item :label="$t('custom.component.gadget.textAlign')">
                <el-select v-model="item.textAlign" placeholder="Please select">
                  <el-option label="Left" value="Left"></el-option>
                  <el-option label="Center" value="Center"></el-option>
                  <el-option label="Right" value="Right"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item :label="$t('custom.component.gadget.allowFiltering')">
                <el-switch v-model="item.allowFiltering"></el-switch>
              </el-form-item>
              <el-form-item :label="$t('custom.component.gadget.disableHtml')">
                <el-switch v-model="item.disableHtmlEncode"></el-switch>
              </el-form-item>
              <!-- <el-form-item label="template">
                <el-select v-model="item.template" placeholder="Please select" clearable>
                <el-option v-for="(temItem,temIndex) in columnTemplates" :key="temIndex"  :label="temItem" :value="temItem"></el-option>
              </el-select>
              </el-form-item> -->
              <el-form-item :label="$t('custom.component.gadget.aggregates')" v-if="item.type === 'number'">
                 <el-checkbox-group v-model="item.aggregates" @change="checkboxChange($event,item)">
                    <el-select multiple v-model="item.aggregates" placeholder="Please select" @change="selectChange($event,item)">
                      <el-option :label="list.label" :value="list.value" v-for="list in aggregates" :key="list.label">
                        <el-checkbox @click.native="(e) => {e.preventDefault()}" :label="list.label"></el-checkbox>
                      </el-option>
                    </el-select>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item :label="$t('custom.component.gadget.numberFormat')" v-if="item.type==='number'&&AveragePoint(item.aggregates)">
                <el-select v-model="item.decimalPoint" placeholder="Please select">
                  <el-option label="0" :value="0"></el-option>
                  <el-option label="0.0" :value="1"></el-option>
                  <el-option label="0.00" :value="2"></el-option>
                  <el-option label="0.000" :value="3"></el-option>
                  <el-option label="0.0000" :value="4"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-card>
    </div>

  </div>
</template>

<script>
import Index from '../../dashboard-filter/index.vue'
export default {
  name: 'ChecklistSetting',
  components: { Index },
  data () {
    return {
      dataSource: [],
      dataSourceColumns: [],
      activeSetting: 'gridSetting',
      gridLinesOptions: ['Default', 'Both', 'None', 'Horizontal', 'Vertical'],
      columnTemplates: ['linkFormat', 'boolFormat', 'progessFormat', 'dateFormat', 'progessFullFormat', 'ticketLinkFormat', 'timeEntryLinkFormat', 'textFormat'],
      expandAllColumn: false,
      setting: {
        headerTitle: '',
        headerDescription: '',
        drillThroughStatus: true,
        report: {
          gridLines: 'Default',
          showColumnMenu: true,
          allowResizing: true,
          allowFiltering: true,
          filterSettings: { type: 'Excel' },
          allowGrouping: true,
          allowPaging: true,
          allowExcelExport: true,
          allowPdfExport: true,
          showExportOption: false,
          toolbar: ['PdfExport', 'CsvExport', 'ColumnChooser'], // 'ExcelExport',
          showColumnChooser: true,
          groupOptions: { columns: ['name'] },
          allowReordering: true,
          allowSorting: true,
          allowTextWrap: true,
          pageSettings: { pageSize: 100, pageSizes: [10, 50, 100, 200, 1000], pageCount: 4 },
          groupSettings: {
            allowReordering: false,
            columns: [],
            disablePageWiseAggregates: false,
            enableLazyLoading: false,
            showDropArea: true,
            showGroupedColumn: false,
            showToggleButton: false
          },
          columns: [

          ]
        }

      },
      aggregates: [
        {
          label: 'Sum',
          value: 'Sum'
        },
        {
          label: 'Average',
          value: 'Average'
        },
        {
          label: 'Min',
          value: 'Min'
        },
        {
          label: 'Max',
          value: 'Max'
        },
        {
          label: 'Count',
          value: 'Count'
        }
      ]
    }
  },
  props: [
    'data'
  ],
  watch: {
    data (value, oldValue) {
      return this.updateSetting(value)
    }
  },

  created () {
    if (this.data) {
      this.$set(this.data)
    }
  },
  methods: {
    AveragePoint (aggregates) {
      if (aggregates.includes('Average')) return true
      else return false
    },
    checkboxChange (e, item) {
      item.aggregates = e
      // this.$set(item, 'aggregates', e)
      this.$forceUpdate()
    },
    selectChange (e, item) {
      item.aggregates = e
      // this.$set(item, 'aggregates', e)
      this.$forceUpdate()
    },
    getData () {
      return this.setting
    },
    setColumns (dataSourceColumns) {
      dataSourceColumns.forEach(element => {
        if (element.type === 'number' && !element.hasOwnProperty('aggregates')) {
          element.aggregates = []
        }
        if (element.type === 'number' && !element.hasOwnProperty('decimalPoint')) {
          this.$set(element, 'decimalPoint', 2)
        }
      })
      this.setting.report.columns = dataSourceColumns
    },
    toggleVisible (index, visible) {
      this.setting.report.columns[index].visible = !visible
    },
    showSettingClick (index, showSetting) {
      this.setting.report.columns[index].showSetting = !showSetting
    },
    expandAll (val) {
      this.setting.report.columns.filter(item => item.visible).forEach(item => {
        item.showSetting = val
      })
    },
    updateSetting (value, list, layerStatus) {
      let dataSourceColumns = []
      this._.merge(this.setting, value.gadgetSetting)
      // value set back
      if (value && value.gadgetSetting && value.gadgetSetting.report &&
      value.gadgetSetting.report.columns && value.gadgetSetting.report.columns.length > 0 && !layerStatus) {
        dataSourceColumns = value.gadgetSetting.report.columns
      } else if (value && list) {
        list.forEach(item => {
          const itemObj = {
            field: item.name,
            headerText: item.name,
            textAlign: 'Left',
            allowEditing: true,
            allowFiltering: true,
            allowGrouping: true,
            allowReordering: true,
            allowSearching: true,
            allowSorting: true,
            autoFit: true,
            disableHtmlEncode: false,
            enableGroupByFormat: false,
            foreignKeyField: item.name,
            showColumnMenu: true,
            showInColumnChooser: true,
            sortDirection: 'Descending',
            type: this.convertType(item.dbType),
            template: null,
            visible: true,
            showSetting: false
          }
          if (value.gadgetSetting && value.gadgetSetting.report && value.gadgetSetting.report.columns) {
            const obj = this._.find(value.gadgetSetting.report.columns, { field: item.name })
            if (obj) {
              dataSourceColumns.push(obj)
            } else {
              dataSourceColumns.push(itemObj)
            }
          } else {
            dataSourceColumns.push(itemObj)
          }
        })
      }
      this.setColumns(dataSourceColumns)
      this.$emit('update:data', this.setting)
      return dataSourceColumns
    },
    convertType (type) {
      return type
    },
    upSortClick (index) {
      let temp = this.setting.report.columns[index - 1]
      this.$set(this.setting.report.columns, index - 1, this.setting.report.columns[index])
      this.$set(this.setting.report.columns, index, temp)
    },
    downSortClick (index) {
      let temp = this.setting.report.columns[index + 1]
      this.$set(this.setting.report.columns, index + 1, this.setting.report.columns[index])
      this.$set(this.setting.report.columns, index, temp)
    }
  }
}
</script>

<style lang="scss">
.grid-setting {

    .column-card {
      margin-top: 8px;
    }
    .el-card__body {
      padding: 5px 20px !important;
    }
    .column-field {
      font-weight: bold;
    }
    .column-type {
      color: #9ea1a7;
    }
    .column-link {
      float: left;
      border: none;
      margin-left:3px
    }
    .el-form-item .el-form-item {
      margin-bottom: 4px;
    }
}

</style>
